﻿@model OrchardCore.ContentFields.ViewModels.EditHtmlFieldViewModel

@{
    var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
    var monacoSettings = Model.PartFieldDefinition.GetSettings<HtmlFieldMonacoEditorSettings>();
    var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
}

@await DisplayAsync(await New.ShortcodeModal())

<div class="form-group">
    <label asp-for="Html">@Model.PartFieldDefinition.DisplayName()</label>
    <div id="@Html.IdFor(x => x.Html)_editor" asp-for="Text" style="min-height: 400px;" class="form-control"
        dir="@culture.GetLanguageDirection()"></div>
    <textarea asp-for="Html" hidden>@Html.Raw(Model.Html)</textarea>
    @if (!String.IsNullOrEmpty(settings.Hint))
    {
        <span class="hint">@settings.Hint</span>
    }
</div>

<script asp-name="monaco" depends-on="admin" at="Foot"></script>
<script at="Foot" depends-on="monaco">
    $(document).ready(function () {
        require(['vs/editor/editor.main'], function () {

            var settings = @Html.Raw(monacoSettings.Options);
            if (settings.automaticLayout == undefined) {
                settings.automaticLayout = true;
            }
            settings.language = 'html';

            var html = document.getElementsByTagName("html")[0];
            const mutationObserver = new MutationObserver(setTheme);
            mutationObserver.observe(html, { attributes: true });

            function setTheme() {
                var theme = html.dataset.theme;
                if (theme === "darkmode") {
                    monaco.editor.setTheme('vs-dark')
                } else {
                    monaco.editor.setTheme('vs')
                }
            }

            setTheme();

            var editor = monaco.editor.create(document.getElementById('@Html.IdFor(x => x.Html)_editor'), settings);
            var textArea = document.getElementById('@Html.IdFor(x => x.Html)');

            editor.getModel().onDidChangeContent((event) => {
                textArea.value = editor.getValue();
                $(document).trigger('contentpreview:render');
            });

            const shortcodesAction = {
                id: "shortcodes",
                label: "Add Shortcode",
                run: function (editor) {
                    shortcodesApp.init(function (value) {
                        if (value) {
                            var selection = editor.getSelection();
                            var text = value;
                            var op = { range: selection, text: text, forceMoveMarkers: true };
                            editor.executeEdits("shortcodes", [op]);
                        }
                        editor.focus();
                    })
                },
                contextMenuGroupId: 'orchardcore',
                contextMenuOrder: 0,
                keybindings: [
                    monaco.KeyMod.Alt | monaco.KeyCode.KEY_S,
                ]
            }
            editor.addAction(shortcodesAction);

            editor.getModel().setValue(textArea.value);

            window.addEventListener("submit", function () {
                textArea.value = editor.getValue();
            });           
        });
    });
</script>



